<template>
	<view class="container" :style="{paddingTop: paddingTop + 'px'}">
		
		<navBar title="退款详情" />
		
		<!-- 步骤条 -->
		<view class="c-step">
			<u-steps
				:current="stepCurrent"
				activeColor="#CF1A1B"
			>
			<!-- 退款订单状态, 1:待审核；3:退款中；4：退款关闭；5:退款成功 -->
			<!-- 门店待审核：1 待审核：3 退款中：6 退款成功：5 退款关闭：4，7 -->
				<u-steps-item title="提交申请" propsClass="csi-item-line">
					<view class="csi-icon" slot="icon">1</view>
				</u-steps-item>
				<u-steps-item title="退款审核" :propsClass="info.orderState > 3 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.orderState > 3 ? 'csi-icon' : '']" slot="icon">2</view>
				</u-steps-item>
				<u-steps-item :title="(info.orderState !== 4 && info.orderState !== 7) ? '退款成功' : '退款关闭'">
					<view :class="['csi-icon-un', info.orderState >= 4 ? 'close-csi-icon' : '']" slot="icon">
						<!-- <text v-if="info.orderState < 4">3</text> -->
						<uni-icons
							v-if="info.orderState === 4 || info.orderState === 7"
							type="closeempty"
							size="16"
							color="#CF1A1B"
						></uni-icons>
						<uni-icons
							v-else-if="info.orderState === 5"
							type="checkmarkempty"
							size="16"
							color="#CF1A1B"
						></uni-icons>
						<text v-else>3</text>
					</view>
				</u-steps-item>
			</u-steps>
		</view>
		
		<!-- 退款明细  -->
		<view class="c-money" v-if="info.orderState !== 4 && info.orderState !== 7">
			<view class="c-title">退款明细</view>
			<view class="cm-content">
				<view class="cm-jer">
					<view class="cmj-label">退款金额：</view>
					<view class="cmj-value">￥{{ info.refundMoney && info.refundMoney.toFixed(2) || 0.00 }}</view>
				</view>
			</view>
		</view>
		
		<!-- 关闭理由  -->
		<view class="c-money" v-if="info.orderState === 4 || info.orderState === 7">
			<view class="c-title">关闭理由</view>
			<view class="cm-content">
				<view class="cm-jer">
					<view style="color: rgba(0, 0, 0, 0.65);;">
						{{ info.rejectReason }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 步骤条 -->
		<!-- 门店待审核：1 待审核：3 退款中：6 退款成功：5 退款关闭：4，7 -->
		<view class="cm-border">
				<u-steps
					:current="stepActive"
					activeColor="#CF1A1B"
					direction="column"
					:dot="true"
				>
					<u-steps-item
						propsClass="csi-item-line"
						v-if="detailStep.length >= 5"
					>
						<view slot="desc" class="step-slot">
							<view class="custom-slot" >
								退款成功
							</view>
							<view class="custom-slot" >
								已退款
									<text style="color: #CF1A1B; margin: 0 4rpx;">{{ info.refundMoney && info.refundMoney.toFixed(2) || 0.00 }}</text> 
								，退款将原路返还至您的支付账户，预计3-7个工作日到账，请注意查收
							</view>
							<view>{{ detailStep[4].createdTime }}</view>
						</view>
					</u-steps-item>
					<u-steps-item
						propsClass="csi-item-line"
						v-if="detailStep.length >= 4"
						:title="detailStep[3].detail"
						:desc="detailStep[3].createdTime"
					></u-steps-item>
					<u-steps-item v-if="detailStep.length >= 3" propsClass="csi-item-line">
						<view slot="desc" class="step-slot" >
							<view v-if="info.orderState === 4" class="custom-slot" :style="{ color: (info.orderState === 4 || info.orderState === 7) ? '#CF1A1B' : ''}">
								{{ (info.orderState === 4 || info.orderState === 7) ? '退款关闭' : info.orderState === 5 ? '退款成功' : '' }}
							</view>
							<view class="custom-slot">
								{{ detailStep[2].detail }}
							</view>
							<view>{{ detailStep[2].createdTime }}</view>
						</view>
					</u-steps-item>
					<u-steps-item
						propsClass="csi-item-line"
						v-if="detailStep.length >= 2"
						:title="detailStep[1].detail"
						:desc="detailStep[1].createdTime"
					></u-steps-item>
					<u-steps-item
						propsClass="csi-item-line"
						v-if="detailStep.length >= 1"
						:title="detailStep[0].detail"
						:desc="detailStep[0].createdTime"
					></u-steps-item>
				</u-steps>
		</view>
		
		<!-- 退款信息 -->
		<view class="c-info">
			<view class="c-title">退款信息</view>
			<view class="ci-top" v-if="info.orderItems && info.orderItems.length">
				<view class="cit-goods" v-for="item in info.orderItems" :key="item.goodsId">
					<view class="citg-img">
						<image :src="item.image || goodsDefault" mode=""></image>
					</view>
					<view class="citg-info">
						<view class="citgi-name">
							{{ item.goodsName || ''}}
						</view>
						<view class="citgi-num">
							共{{ item.quantity || 0 }}件
						</view>
					</view>
				</view>
			</view>
			<view class="ci-bottom">
				<view class="cib-list">
					<view class="cibl-label">退款原因：</view>
					<view class="cibl-value">{{ info.refundReason }}</view>
				</view>
				<view class="cib-list">
					<view class="cibl-label">退款金额：</view>
					<view class="cibl-value">￥{{ info.refundMoney && info.refundMoney.toFixed(2) || 0.00}}</view>
				</view>
				<view class="cib-list">
					<view class="cibl-label">售后单号：</view>
					<view class="cibl-value">{{ info.refundOrderNo }}</view>
				</view>
				<view class="cib-list">
					<view class="cibl-label">申请时间：</view>
					<view class="cibl-value">{{ info.createdTime }}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import goodsDefault from '@/static/goods_default_square.png'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				goodsDefault,
				paddingTop: '',
				stepCurrent: 0,
				info: {},
				stepActive: 0,
				detailStep: []
			};
		},
		methods: {
			async getDetail(id){
				uni.showLoading({
					title: '加载中...'
				})
				try {
					const res = await this.$request({
						method: 'GET',
						url: `/order-center/carOwner/refund/orders/${id}`,
					})
					this.info = res.datas
					
					// 退款订单状态, 1:待审核；3:平台待审核；4：退款关闭；5:退款成功；6:退款中；7:平台驳回
					this.stepCurrent = this.info.orderState === 1
					if(this.info.orderState === 1){
						this.stepCurrent = 0
					}else if(this.info.orderState === 4 || this.info.orderState === 5){
						this.stepCurrent = 2
					}
					
					this.detailStep = this.info.logs || []
					this.stepActive = this.detailStep.length === 3 ? 2 : this.detailStep.length === 2 ? 1 : 0
					
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			}
		},
		onLoad(query){
			const { id } = query
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			this.getDetail(id)
		}
	}
</script>

<style lang="scss" scoped>
.container {
	// 步骤条
	.c-step {
		display: flex;
		align-items: center;
		height: 120px;
		background-color: #ffffff;
		// image {
		// 	width: 24px;
		// 	height: 24px;
		// }
		
		// !--   进度条样式
		// 先统一设置,未满足条件的样式
		.csi-icon-un {
			width: 48rpx;
			height: 48rpx;
			text-align: center;
			border-radius: 24rpx;
			line-height: 48rpx;
			background-color: transparent;
			color: rgba(0, 0, 0, 0.40);
			border: 2rpx solid rgba(0, 0, 0, 0.40);
		}
		// 满足条件
		.csi-icon {
			width: 48rpx;
			height: 48rpx;
			text-align: center;
			border-radius: 24rpx;
			line-height: 48rpx;
			background-color: #CF1A1B;
			color: #ffffff;
			border: none;
		}
		// 退款关闭-样式
		.close-csi-icon {
			background-color: transparent;
			border: 2rpx solid #CF1A1B;
		}
		
		// ---分割线
		// 全部设置成未选中
		/deep/ .u-steps-item {
			.u-steps-item__line {
				background-color: #969799 !important;
			}
		}
		// 自定义判断条件添加类名，改为选中
		/deep/ .csi-item-line {
			.u-steps-item__line {
				background-color: #CF1A1B !important;
			} 
		}
		
		/deep/ .u-steps-item__content {
			margin-top: 24rpx !important;
			margin-left: 0 !important;
			.u-text__value {
				font-size: 12px !important;
				color: rgba(0, 0, 0, 0.85) !important;
			}
		}
		// --!   进度条样式
	}
	
	// 标题
	.c-title {
		box-sizing: border-box;
		padding: 32rpx 36rpx;
		color: rgba(0, 0, 0, 0.85);
		text-shadow: 0 0 0.1px currentColor;
	}
	
	.c-money {
		margin-top: 20rpx;
		background-color: #ffffff;
		.cm-content {
			padding: 0 32rpx 32rpx;
			.cm-jer {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				.cmj-label {
					color: rgba(0, 0, 0, 0.65);
					margin-right: 20rpx;
				}
				.cmj-value {
					color: rgba(238, 59, 59, 0.85);
				}
			}
		}
	}
	
	.cm-border {
		margin-top: 20rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 32rpx 44rpx;
		/deep/ .u-steps-item__content {
			margin-left: 22rpx !important;
			margin-bottom: 40rpx !important;
			.u-text__value {
				font-size: 14px !important;
				color: rgba(0, 0, 0, 0.90) !important;
			}
			.u-text__value--tips, .step-slot {
				margin-top: 10rpx !important;
				font-size: 12px !important;
				color: rgba(0, 0, 0, 0.60) !important;
			}
			.custom-slot {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.90);
				line-height: 20px;
				margin-bottom: 6rpx;
			}
		}
		/deep/ .u-steps-item:nth-last-child(1) .u-steps-item__content {
			margin-bottom: 0 !important;
		}
		
		// 步骤条选中样式
		/deep/ .csi-item-line {
			.u-steps-item__line {
				background-color: #CF1A1B !important;
			}
			.u-steps-item__wrapper__dot {
				background-color: #CF1A1B !important;
			}
		}
	}

	.c-info {
		margin-top: 20rpx;
		background-color: #ffffff;
		.ci-top	{
			padding: 10rpx 32rpx 28rpx;
			box-sizing: border-box;
			.cit-goods {
				display: flex;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
				padding-bottom: 28rpx;
				.citg-img {
					margin-right: 26rpx;
					image {
						width: 176rpx;
						height: 176rpx;
					}
				}
				.citg-info {
					padding: 28rpx 0 18rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.citgi-name {
						color: rgba(0, 0, 0, 0.85);
						text-shadow: 0 0 0.1px currentColor;
						word-wrap: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.citgi-num {
						color: rgba(0, 0, 0, 0.65);
					}
				}
			}
		}
		.ci-bottom {
			box-sizing: border-box;
			padding: 32rpx;
			.cib-list {
				display: flex;
				font-size: 14px;
				margin-bottom: 32rpx;
				.cibl-label {
					color: rgba(0, 0, 0, 0.65);
				}
				.cibl-value {
					flex: 1;
					margin-left: 64rpx;
					color: rgba(0, 0, 0, 0.85);
					word-wrap: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

}
</style>
